<script setup>
	import { computed, ref } from 'vue'
	import { message } from 'ant-design-vue'

	const props = defineProps({
		selectedTables: {
			type: Array,
			required: true
		},
		editor: {
			type: Object,
			required: true
		}
	})

	const emit = defineEmits(['template-applied'])

	// SQL模板分类系统
	const SQL_TEMPLATE_CATEGORIES = [
		{
			key: 'query',
			label: '查询模板',
			icon: '🔍',
			description: '基础数据查询相关的SQL模板'
		},
		{
			key: 'statistics',
			label: '统计模板',
			icon: '📊',
			description: '数据统计分析相关的SQL模板'
		},
		{
			key: 'join',
			label: '关联查询模板',
			icon: '🔗',
			description: '多表关联查询相关的SQL模板'
		},
		{
			key: 'advanced',
			label: '高级模板',
			icon: '⚡',
			description: '复杂业务场景的SQL模板'
		}
	]

	// 预设SQL模板
	const PRESET_SQL_TEMPLATES = {
		query: [
			{
				id: 'basic_select',
				title: '基础查询',
				sql: "SELECT * FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND create_time >= ${current_date} - INTERVAL 30 DAY",
				description: '基础数据查询，包含删除标记过滤和时间范围限制',
				params: ['table']
			},
			{
				id: 'conditional_query',
				title: '条件筛选',
				sql: "SELECT * FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND {column} {operator} {value} AND creator_id = ${current_user_id}",
				description: '带条件筛选的查询，支持用户权限过滤',
				params: ['table', 'column', 'operator', 'value']
			},
			{
				id: 'distinct_query',
				title: '去重查询',
				sql: "SELECT DISTINCT {column} FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND dept_id = ${current_user_dept_id}",
				description: '去重查询，按部门权限过滤',
				params: ['column', 'table']
			},
			{
				id: 'time_range_query',
				title: '时间范围查询',
				sql: "SELECT * FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND {dateColumn} BETWEEN ${current_date} - INTERVAL {days} DAY AND ${current_date}",
				description: '时间范围查询，支持动态日期计算',
				params: ['table', 'dateColumn', 'days']
			},
			{
				id: 'pagination_query',
				title: '分页查询',
				sql: "SELECT * FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND creator_id = ${current_user_id} ORDER BY create_time DESC LIMIT {pageSize} OFFSET {offset}",
				description: '分页查询，支持排序和用户权限过滤',
				params: ['table', 'pageSize', 'offset']
			},
			{
				id: 'fuzzy_search',
				title: '模糊搜索',
				sql: "SELECT * FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND ({column1} LIKE '%{keyword}%' OR {column2} LIKE '%{keyword}%') AND dept_id = ${current_user_dept_id}",
				description: '多字段模糊搜索，支持部门权限过滤',
				params: ['table', 'column1', 'column2', 'keyword']
			},
			{
				id: 'null_check',
				title: '空值检查',
				sql: "SELECT * FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND {column} IS NOT NULL AND {column} != '' AND creator_id = ${current_user_id}",
				description: '检查非空值记录，排除空字符串',
				params: ['table', 'column']
			},
			{
				id: 'data_cleaning',
				title: '数据清洗',
				sql: "SELECT TRIM({column}) as clean_column, COUNT(*) as count FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND dept_id = ${current_user_dept_id} GROUP BY TRIM({column}) HAVING COUNT(*) > 1",
				description: '数据清洗查询，去除空格并查找重复数据',
				params: ['table', 'column']
			},
			{
				id: 'recent_data',
				title: '最新数据',
				sql: "SELECT * FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND create_time >= ${current_datetime} - INTERVAL 1 HOUR AND creator_id = ${current_user_id} ORDER BY create_time DESC",
				description: '查询最近一小时的数据记录',
				params: ['table']
			},
			{
				id: 'user_data_summary',
				title: '用户数据汇总',
				sql: "SELECT creator_id, creator_name, COUNT(*) as total_records, MAX(create_time) as last_update FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND dept_id = ${current_user_dept_id} GROUP BY creator_id, creator_name ORDER BY total_records DESC",
				description: '按用户汇总数据记录数和最后更新时间',
				params: ['table']
			}
		],
		statistics: [
			{
				id: 'group_count',
				title: '分组统计',
				sql: "SELECT {column}, COUNT(*) as count FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND dept_id = ${current_user_dept_id} GROUP BY {column} ORDER BY count DESC",
				description: '按字段分组统计记录数',
				params: ['column', 'table']
			},
			{
				id: 'sum_statistics',
				title: '求和统计',
				sql: "SELECT {column}, SUM({value}) as total FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND create_time >= ${current_date} - INTERVAL 30 DAY GROUP BY {column}",
				description: '按字段分组求和统计',
				params: ['column', 'value', 'table']
			},
			{
				id: 'avg_statistics',
				title: '平均值统计',
				sql: "SELECT {column}, AVG({value}) as average, COUNT(*) as count FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' GROUP BY {column} HAVING COUNT(*) > 1",
				description: '按字段分组计算平均值',
				params: ['column', 'value', 'table']
			},
			{
				id: 'ranking_query',
				title: '排行榜查询',
				sql: "SELECT {column}, {value}, ROW_NUMBER() OVER (ORDER BY {value} DESC) as ranking FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND dept_id = ${current_user_dept_id} ORDER BY {value} DESC LIMIT 10",
				description: 'TOP N排行榜查询',
				params: ['column', 'value', 'table']
			},
			{
				id: 'monthly_statistics',
				title: '月度统计',
				sql: "SELECT DATE_FORMAT(create_time, '%Y-%m') as month, COUNT(*) as count, SUM({value}) as total FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND creator_id = ${current_user_id} GROUP BY DATE_FORMAT(create_time, '%Y-%m') ORDER BY month DESC",
				description: '按月统计数据记录数和总值',
				params: ['table', 'value']
			},
			{
				id: 'daily_trend',
				title: '日趋势分析',
				sql: "SELECT DATE(create_time) as date, COUNT(*) as count, AVG({value}) as avg_value FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND create_time >= ${current_date} - INTERVAL 30 DAY AND dept_id = ${current_user_dept_id} GROUP BY DATE(create_time) ORDER BY date",
				description: '最近30天的日趋势分析',
				params: ['table', 'value']
			},
			{
				id: 'percentile_analysis',
				title: '百分位分析',
				sql: "SELECT MIN({value}) as min_value, MAX({value}) as max_value, AVG({value}) as avg_value, PERCENTILE_CONT(0.5) WITHIN GROUP (ORDER BY {value}) as median, PERCENTILE_CONT(0.95) WITHIN GROUP (ORDER BY {value}) as p95 FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND creator_id = ${current_user_id}",
				description: '数值字段的百分位统计分析',
				params: ['table', 'value']
			},
			{
				id: 'department_comparison',
				title: '部门对比',
				sql: "SELECT dept_name, COUNT(*) as count, AVG({value}) as avg_value, SUM({value}) as total FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND create_time >= ${current_date} - INTERVAL 90 DAY GROUP BY dept_name ORDER BY total DESC",
				description: '各部门数据对比分析',
				params: ['table', 'value']
			},
			{
				id: 'growth_rate',
				title: '增长率分析',
				sql: "SELECT DATE_FORMAT(create_time, '%Y-%m') as month, COUNT(*) as current_count, LAG(COUNT(*)) OVER (ORDER BY DATE_FORMAT(create_time, '%Y-%m')) as prev_count, ROUND((COUNT(*) - LAG(COUNT(*)) OVER (ORDER BY DATE_FORMAT(create_time, '%Y-%m'))) / LAG(COUNT(*)) OVER (ORDER BY DATE_FORMAT(create_time, '%Y-%m')) * 100, 2) as growth_rate FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND dept_id = ${current_user_dept_id} GROUP BY DATE_FORMAT(create_time, '%Y-%m') ORDER BY month",
				description: '月度数据增长率分析',
				params: ['table']
			},
			{
				id: 'user_activity',
				title: '用户活跃度',
				sql: "SELECT creator_name, COUNT(*) as activity_count, COUNT(DISTINCT DATE(create_time)) as active_days, MAX(create_time) as last_activity FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND create_time >= ${current_date} - INTERVAL 30 DAY AND dept_id = ${current_user_dept_id} GROUP BY creator_id, creator_name ORDER BY activity_count DESC",
				description: '用户活跃度统计分析',
				params: ['table']
			}
		],
		join: [
			{
				id: 'left_join',
				title: '左连接查询',
				sql: "SELECT t1.*, t2.{joinColumn} FROM {table} t1 LEFT JOIN {joinTable} t2 ON t1.{joinField} = t2.{joinField} WHERE t1.DELETE_FLAG = 'NOT_DELETE' AND t1.creator_id = ${current_user_id}",
				description: '两表左连接查询，支持用户权限过滤',
				params: ['table', 'joinTable', 'joinField', 'joinColumn']
			},
			{
				id: 'inner_join',
				title: '内连接查询',
				sql: "SELECT t1.{column1}, t2.{column2} FROM {table} t1 INNER JOIN {joinTable} t2 ON t1.{joinField} = t2.{joinField} WHERE t1.DELETE_FLAG = 'NOT_DELETE' AND t2.DELETE_FLAG = 'NOT_DELETE' AND t1.dept_id = ${current_user_dept_id}",
				description: '两表内连接查询，支持部门权限过滤',
				params: ['table', 'joinTable', 'joinField', 'column1', 'column2']
			},
			{
				id: 'subquery',
				title: '子查询示例',
				sql: "SELECT * FROM {table} WHERE {column} IN (SELECT {subColumn} FROM {subTable} WHERE DELETE_FLAG = 'NOT_DELETE' AND creator_id = ${current_user_id})",
				description: '使用子查询进行数据筛选',
				params: ['table', 'column', 'subColumn', 'subTable']
			},
			{
				id: 'multi_table_join',
				title: '多表关联',
				sql: "SELECT t1.*, t2.{column2}, t3.{column3} FROM {table} t1 LEFT JOIN {table2} t2 ON t1.{joinField1} = t2.{joinField1} LEFT JOIN {table3} t3 ON t1.{joinField2} = t3.{joinField2} WHERE t1.DELETE_FLAG = 'NOT_DELETE' AND t1.dept_id = ${current_user_dept_id}",
				description: '三表关联查询，支持部门权限',
				params: ['table', 'table2', 'table3', 'joinField1', 'joinField2', 'column2', 'column3']
			},
			{
				id: 'exists_query',
				title: 'EXISTS查询',
				sql: "SELECT * FROM {table} t1 WHERE DELETE_FLAG = 'NOT_DELETE' AND EXISTS (SELECT 1 FROM {subTable} t2 WHERE t2.{joinField} = t1.{joinField} AND t2.DELETE_FLAG = 'NOT_DELETE' AND t2.creator_id = ${current_user_id})",
				description: '使用EXISTS进行关联查询',
				params: ['table', 'subTable', 'joinField']
			},
			{
				id: 'not_exists_query',
				title: 'NOT EXISTS查询',
				sql: "SELECT * FROM {table} t1 WHERE DELETE_FLAG = 'NOT_DELETE' AND NOT EXISTS (SELECT 1 FROM {subTable} t2 WHERE t2.{joinField} = t1.{joinField} AND t2.DELETE_FLAG = 'NOT_DELETE') AND t1.dept_id = ${current_user_dept_id}",
				description: '查找不存在关联记录的数据',
				params: ['table', 'subTable', 'joinField']
			},
			{
				id: 'union_query',
				title: 'UNION联合查询',
				sql: "SELECT {column1}, {column2} FROM {table1} WHERE DELETE_FLAG = 'NOT_DELETE' AND creator_id = ${current_user_id} UNION SELECT {column1}, {column2} FROM {table2} WHERE DELETE_FLAG = 'NOT_DELETE' AND creator_id = ${current_user_id} ORDER BY {column1}",
				description: '联合查询多个表的数据',
				params: ['table1', 'table2', 'column1', 'column2']
			},
			{
				id: 'cross_join',
				title: '交叉连接',
				sql: "SELECT t1.{column1}, t2.{column2} FROM {table1} t1 CROSS JOIN {table2} t2 WHERE t1.DELETE_FLAG = 'NOT_DELETE' AND t2.DELETE_FLAG = 'NOT_DELETE' AND t1.dept_id = ${current_user_dept_id} LIMIT 100",
				description: '交叉连接查询，限制结果数量',
				params: ['table1', 'table2', 'column1', 'column2']
			},
			{
				id: 'self_join',
				title: '自连接查询',
				sql: "SELECT t1.{column}, t2.{column} as parent_{column} FROM {table} t1 LEFT JOIN {table} t2 ON t1.parent_id = t2.id WHERE t1.DELETE_FLAG = 'NOT_DELETE' AND t1.creator_id = ${current_user_id}",
				description: '表自连接查询，常用于树形结构',
				params: ['table', 'column']
			},
			{
				id: 'aggregate_join',
				title: '聚合关联查询',
				sql: "SELECT t1.*, t2.total_count, t2.avg_value FROM {table} t1 LEFT JOIN (SELECT {joinField}, COUNT(*) as total_count, AVG({value}) as avg_value FROM {subTable} WHERE DELETE_FLAG = 'NOT_DELETE' GROUP BY {joinField}) t2 ON t1.{joinField} = t2.{joinField} WHERE t1.DELETE_FLAG = 'NOT_DELETE' AND t1.dept_id = ${current_user_dept_id}",
				description: '与聚合子查询的关联查询',
				params: ['table', 'subTable', 'joinField', 'value']
			}
		],
		advanced: [
			{
				id: 'window_function',
				title: '窗口函数查询',
				sql: "SELECT *, ROW_NUMBER() OVER (PARTITION BY {partitionColumn} ORDER BY {orderColumn} DESC) as rn FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND dept_id = ${current_user_dept_id}",
				description: '使用窗口函数进行高级分析，支持部门权限',
				params: ['table', 'partitionColumn', 'orderColumn']
			},
			{
				id: 'recursive_query',
				title: '递归查询',
				sql: "WITH RECURSIVE tree AS (SELECT * FROM {table} WHERE parent_id IS NULL AND DELETE_FLAG = 'NOT_DELETE' AND creator_id = ${current_user_id} UNION ALL SELECT t.* FROM {table} t JOIN tree ON t.parent_id = tree.id WHERE t.DELETE_FLAG = 'NOT_DELETE') SELECT * FROM tree",
				description: '递归查询树形结构数据，支持用户权限',
				params: ['table']
			},
			{
				id: 'pivot_query',
				title: '数据透视',
				sql: "SELECT {groupColumn}, SUM(CASE WHEN {pivotColumn} = '{value1}' THEN {valueColumn} ELSE 0 END) as {alias1}, SUM(CASE WHEN {pivotColumn} = '{value2}' THEN {valueColumn} ELSE 0 END) as {alias2} FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND dept_id = ${current_user_dept_id} GROUP BY {groupColumn}",
				description: '数据透视表查询，支持部门权限',
				params: ['table', 'groupColumn', 'pivotColumn', 'valueColumn', 'value1', 'value2', 'alias1', 'alias2']
			},
			{
				id: 'cte_query',
				title: 'CTE公用表表达式',
				sql: "WITH user_stats AS (SELECT creator_id, COUNT(*) as total_count FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND dept_id = ${current_user_dept_id} GROUP BY creator_id), avg_stats AS (SELECT AVG(total_count) as avg_count FROM user_stats) SELECT u.*, a.avg_count FROM user_stats u CROSS JOIN avg_stats a WHERE u.total_count > a.avg_count",
				description: '使用CTE进行复杂数据分析',
				params: ['table']
			},
			{
				id: 'performance_query',
				title: '性能优化查询',
				sql: "SELECT /*+ USE_INDEX({table}, idx_{indexColumn}) */ * FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND {indexColumn} = {value} AND creator_id = ${current_user_id} ORDER BY create_time DESC LIMIT 1000",
				description: '使用索引提示的性能优化查询',
				params: ['table', 'indexColumn', 'value']
			},
			{
				id: 'json_query',
				title: 'JSON数据查询',
				sql: "SELECT id, JSON_EXTRACT({jsonColumn}, '$.{jsonPath}') as extracted_value FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND JSON_EXTRACT({jsonColumn}, '$.{jsonPath}') IS NOT NULL AND creator_id = ${current_user_id}",
				description: 'JSON字段数据提取和查询',
				params: ['table', 'jsonColumn', 'jsonPath']
			},
			{
				id: 'dynamic_sql',
				title: '动态条件查询',
				sql: "SELECT * FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND dept_id = ${current_user_dept_id} AND (CASE WHEN '${filter_type}' = 'recent' THEN create_time >= ${current_date} - INTERVAL 7 DAY WHEN '${filter_type}' = 'month' THEN MONTH(create_time) = MONTH(${current_date}) ELSE 1=1 END)",
				description: '根据条件动态调整查询逻辑',
				params: ['table']
			},
			{
				id: 'batch_update',
				title: '批量更新查询',
				sql: "UPDATE {table} SET update_time = ${current_datetime}, updater_id = ${current_user_id} WHERE DELETE_FLAG = 'NOT_DELETE' AND id IN (SELECT id FROM (SELECT id FROM {table} WHERE {condition} AND creator_id = ${current_user_id} LIMIT 1000) tmp)",
				description: '安全的批量更新操作',
				params: ['table', 'condition']
			},
			{
				id: 'data_migration',
				title: '数据迁移查询',
				sql: "INSERT INTO {targetTable} ({columns}) SELECT {columns} FROM {sourceTable} WHERE DELETE_FLAG = 'NOT_DELETE' AND create_time >= ${current_date} - INTERVAL 1 DAY AND NOT EXISTS (SELECT 1 FROM {targetTable} t WHERE t.{uniqueColumn} = {sourceTable}.{uniqueColumn})",
				description: '增量数据迁移查询',
				params: ['targetTable', 'sourceTable', 'columns', 'uniqueColumn']
			},
			{
				id: 'full_text_search',
				title: '全文搜索',
				sql: "SELECT *, MATCH({searchColumns}) AGAINST('{keywords}' IN NATURAL LANGUAGE MODE) as relevance FROM {table} WHERE DELETE_FLAG = 'NOT_DELETE' AND MATCH({searchColumns}) AGAINST('{keywords}' IN NATURAL LANGUAGE MODE) AND dept_id = ${current_user_dept_id} ORDER BY relevance DESC",
				description: '全文搜索查询，按相关性排序',
				params: ['table', 'searchColumns', 'keywords']
			}
		]
	}

	// 响应式数据
	const selectedCategory = ref('query')

	// 计算属性
	const currentCategoryTemplates = computed(() => {
		return PRESET_SQL_TEMPLATES[selectedCategory.value] || []
	})

	// 选择SQL模板
	const selectTemplate = (template) => {
		// 替换模板中的表名和公式
		let sqlContent = template.sql

		// 如果有选择的表，则替换表名占位符
		if (props.selectedTables.length > 0) {
			sqlContent = sqlContent.replace(/{table}/g, props.selectedTables[0])
		}

		// 处理其他参数占位符
		if (template.params && template.params.length > 1) {
			// 如果有多个参数，显示参数配置对话框
			showParameterDialog(template, sqlContent)
			return
		}

		// 应用模板到编辑器
		applyTemplateToEditor(sqlContent)
		emit('template-applied', { template, sql: sqlContent })
	}

	// 应用模板到编辑器
	const applyTemplateToEditor = (sqlContent) => {
		if (props.editor && props.editor.cminstance) {
			const cm = props.editor.cminstance
			const currentContent = cm.getValue()

			if (currentContent && currentContent.trim()) {
				const newContent = currentContent.trim() + '\n\n' + sqlContent
				cm.setValue(newContent)
			} else {
				cm.setValue(sqlContent)
			}

			cm.setCursor(cm.lineCount(), 0)
			cm.focus()
		}
	}

	// 显示参数配置对话框
	const showParameterDialog = (template, sqlContent) => {
		// 这里可以实现参数配置对话框
		message.info('参数配置功能开发中...')
	}

	// 暴露方法给父组件
	defineExpose({
		selectTemplate,
		selectedCategory,
		currentCategoryTemplates
	})
</script>

<template>
	<div class="sql-template-manager">
		<!-- 分类导航 -->
		<div class="category-tabs">
			<a-tabs v-model:activeKey="selectedCategory" size="small" type="card">
				<a-tab-pane v-for="category in SQL_TEMPLATE_CATEGORIES" :key="category.key" :tab="category.label">
					<template #tab>
						<span>{{ category.icon }} {{ category.label }}</span>
					</template>
				</a-tab-pane>
			</a-tabs>
		</div>

		<!-- 模板列表 -->
		<div class="template-list">
			<div class="template-header">
				<span class="template-count">共 {{ currentCategoryTemplates.length }} 个模板</span>
			</div>

			<div class="template-items">
				<div
					v-for="template in currentCategoryTemplates"
					:key="template.id"
					class="template-item"
					@click="selectTemplate(template)"
				>
					<div class="template-content">
						<div class="template-title">{{ template.title }}</div>
						<div class="template-description">{{ template.description }}</div>
						<div class="template-sql">{{ template.sql.substring(0, 100) }}...</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.sql-template-manager {
		width: 100%;
		max-width: 500px;
	}

	.category-tabs {
		margin-bottom: 12px;
	}

	.template-list {
		max-height: 400px;
		overflow-y: auto;
	}

	.template-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 8px;
	}

	.template-count {
		font-size: 12px;
		color: rgba(0, 0, 0, 0.45);
	}

	.template-items {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.template-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 12px;
		border: 1px solid #d9d9d9;
		border-radius: 2px;
		cursor: pointer;
		transition: all 0.3s;
		background: #fff;
	}

	.template-item:hover {
		border-color: #1890ff;
		box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
	}

	.template-content {
		flex: 1;
		min-width: 0;
	}

	.template-title {
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		margin-bottom: 4px;
	}

	.template-description {
		font-size: 12px;
		color: rgba(0, 0, 0, 0.65);
		margin-bottom: 6px;
	}

	.template-sql {
		font-size: 11px;
		color: rgba(0, 0, 0, 0.45);
		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
		background: #f5f5f5;
		padding: 4px 6px;
		border-radius: 2px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.template-actions {
		display: flex;
		gap: 4px;
		margin-left: 8px;
	}

	/* 深色主题适配 */
	@media (prefers-color-scheme: dark) {
		.template-item {
			background: #1f1f1f;
			border-color: #434343;
		}

		.template-item:hover {
			border-color: #1890ff;
			background: #111b26;
		}

		.template-sql {
			background: #2d2d2d;
			color: #e6e6e6;
		}
	}
</style>
